<template>
    <div class="centent-in">
        <div class="centent-top">
            <a href="#" class="centent-topa1" :class="{ chufaa: isblue }" @click="handelclickfirst">推荐</a>
            <a href="#" class="centent-topa2" :class="{ chufaa: !isblue }" @click="handleClickLatest">最新</a>
        </div>
        <div class="centent-neirong">
            <ContentList v-for="item in filteredList" :key="newnew" :title="item.title" :content="item.content"
                :author="item.author" :visits="item.visits" :collection="item.collection" :type="item.type"
                :imgsrc="item.imgsrc" :imgstatus="item.imgstatus as boolean">
            </ContentList>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import ContentList from './content_in/contentList.vue';
import type { datalistType } from '../../util/data';



const props = defineProps({
    items: Array,
    newitems: Array,
});

const isblue = ref(true);
const newnew = ref(0);
const datalist = ref<Array<datalistType>>(props.items as Array<datalistType> || []);
const newdatalist = ref<Array<datalistType>>(props.newitems as Array<datalistType> || []);

const filteredList = computed(() => {
    return isblue.value ? datalist.value : newdatalist.value;
});

function handelclickfirst() {
    isblue.value = true;
    newnew.value = 0;
}

function handleClickLatest() {
    isblue.value = false;
    newnew.value = 1;
}



function generateDataWithIncrement(datalist: Array<datalistType>) {
    return datalist.map((item, index) => {
        const newItem = { ...item };
        newItem.id = `id-${index}`;
        return newItem;
    });
}

function handleScrollnewnew() {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    if (scrollTop + clientHeight + 1000 >= scrollHeight) {
        if (newnew.value === 0) {
            const newData = generateDataWithIncrement([datalist.value[0]]);
            datalist.value = [...datalist.value, ...newData];
        }
        if (newnew.value === 1) {
            const newData = generateDataWithIncrement([newdatalist.value[0]]);
            newdatalist.value = [...newdatalist.value, ...newData];
        }
    }
}

onMounted(() => {
    window.addEventListener('scroll', handleScrollnewnew);
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScrollnewnew);
});
</script>

<style lang="scss" scoped>
@import url(../../assets/incontent.scss);
</style>